<template>
  <div>
    <!-- 头部搜索栏 -->
    <div>
      <van-search
        v-model="value"
        show-action
        label="深圳"
        placeholder="公积金社保查询"
        @search="onSearch"
      >
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>

      <van-grid >
        <van-grid-item icon="scan" text="扫一扫" />
        <van-grid-item icon="refund-o" text="付钱/收钱" />
        <van-grid-item icon="flag-o" text="出行" />
        <van-grid-item icon="paid" text="卡包" />
      </van-grid>
    </div>
    <hr />

    <van-grid square :column-num="5">
      <van-grid-item
        v-for="(item, index) in listName"
        :key="index"
        :text="item.listName2"
      >
        <van-icon :class="['iconfont ', item.iconName]" />
        <p v-text="item.listName2" style="fontSize: 12px"></p>
      </van-grid-item>
      <van-grid-item :to="{ path: '/home' }">
        <van-icon name="apps-o" />
        <p style="fontsize: 12px">更多</p>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import Vue from "vue";
import { Search, Grid, GridItem } from "vant";
import "vant/lib/index.css";
Vue.use(Search);
Vue.use(Grid);
Vue.use(GridItem);
export default {
  data() {
    return {
      // 搜索输入的内容
      value: "",
      listName: [
        {
          nameId: 1,
          iconName: "icon-elment",
          listName2: "饿了么",
        },
        {
          nameId: 2,
          iconName: "icon-koubei",
          listName2: "口碑",
        },
        {
          nameId: 3,
          iconName: "icon-shiminzhongxin",
          listName2: "市民中心",
        },
        {
          nameId: 4,
          iconName: "icon-dianyingyanchu",
          listName2: "电影演出",
        },
        {
          nameId: 5,
          iconName: "icon-zhuanzhang",
          listName2: "转账",
        },
        {
          nameId: 6,
          iconName: "icon-xinyongqiahuankuan",
          listName2: "信用卡还款",
        },
        {
          nameId: 7,
          iconName: "icon-shouji54",
          listName2: "充值中心",
        },
        {
          nameId: 8,
          iconName: "icon-yuebao",
          listName2: "余额宝",
        },
        {
          nameId: 9,
          iconName: "icon-huabei",
          listName2: "花呗",
        },
        {
          nameId: 10,
          iconName: "icon-elment",
          listName2: "我的账本",
        },
        {
          nameId: 11,
          iconName: "icon-xinbaniconshangchuan-",
          listName2: "记账本",
        },
        {
          nameId: 12,
          iconName: "icon-truck",
          listName2: "快递",
        },
        {
          nameId: 13,
          iconName: "icon-shenghuojiaofei",
          listName2: "生活缴费",
        },
        {
          nameId: 14,
          iconName: "icon-huochepiao",
          listName2: "火车票机票",
        },
        // {
        //   nameId: 15,
        //   iconName: "icon-dianyingyanchu",
        //   listName2: "电影",
        // },
      ],
    };
  },

  methods: {
    // 点击搜索
    onSearch() {},
    // 点击更多
    
  },
};
</script>

<style scope>
</style>